<template>
  <el-dialog title="选择城市信息" :visible.sync="dialogVisible" width="40%">
    <el-autocomplete :trigger-on-focus="false" style="width:100%; margin-bottom: 10px;" v-model="state" :fetch-suggestions="querySearchAsync" placeholder="城市搜索" @select="handleSelect"></el-autocomplete>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="全部" name="first">
        <h3>常用地址</h3>
        <el-row :gutter="20">
          <el-col :span="6" v-for="(item, index) in localCityName" :key="index">
            <el-button @click="commonlyUsed(item)" type="text">{{ item.cityName }}</el-button>
          </el-col>
        </el-row>
        <h3>全部省份</h3>
        <el-row :gutter="20">
          <el-col :span="6" v-for="(item, index) in options" :key="index">
            <el-button @click="provinceClick(item.label)" type="text">{{ item.label }}</el-button>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane v-if="!!cityList.length" :label="provinceName" name="second">
        <el-row :gutter="20">
          <el-col :span="6" v-for="(item, index) in cityList" :key="index">
            <el-button @click="cityClick(item.label)" type="text">{{ item.label }}</el-button>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <span slot="footer" class="dialog-footer">

    </span>
  </el-dialog>
</template>

<script>
import { provinceAndCityData } from "element-china-area-data";
export default {
  name: "selecteCity",
  data() {
    return {
      restaurants: [],
      state: "",
      timeout: null,

      cityInput: "",
      activeName: "first",
      dialogVisible: false,
      options: provinceAndCityData,
      cityList: [],
      provinceName: "",
      localCityName: [],
      allCityList: [],
    };
  },
  methods: {
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (
          state.label.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect(item) {
      this.$emit("getCityName", item.provinceName + "/" + item.label);
      const localCityNameArr = this.localCityName.map((city) => city.cityName);
      if (!localCityNameArr.includes(item.label)) {
        this.localCityName.push({
          provinceName: item.provinceName,
          cityName: item.label,
        });
      }
      localStorage.setItem("cityName", JSON.stringify(this.localCityName));
      this.dialogVisible = false;
    },
    cityChange() {},
    commonlyUsed(item) {
      this.$emit("getCityName", item.provinceName + "/" + item.cityName);
      this.dialogVisible = false;
    },
    provinceClick(label) {
      const item = this.options.find((item) => item.label === label);
      if (item) {
        this.cityList = item.children;
        this.provinceName = item.label;
        this.activeName = "second";
      }
    },
    cityClick(label) {
      this.$emit("getCityName", this.provinceName + "/" + label);
      const localCityNameArr = this.localCityName.map((item) => item.cityName);
      if (!localCityNameArr.includes(label)) {
        this.localCityName.push({
          provinceName: this.provinceName,
          cityName: label,
        });
      }
      localStorage.setItem("cityName", JSON.stringify(this.localCityName));
      this.dialogVisible = false;
    },
    getLocalCityName() {
      const localCityName = localStorage.getItem("cityName");
      if (localCityName) {
        this.localCityName = JSON.parse(localCityName);
      }
    },
  },
  mounted() {
    this.allCityList = [];
    this.options.forEach((item) => {
      item.children.forEach((city) => {
        city.provinceName = item.label;
        this.allCityList.push(city);
      });
    });
    this.restaurants = this.allCityList;
  },
};
</script>

<style scoped>
</style>
